<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{$title}</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <meta itemprop="name" content="{$title}">
    <meta itemprop="description" content="{$share_introduction}">
    <meta itemprop="image" content="{$share_img}">
    <link rel="stylesheet" href="{$domain}/static/video_share/css/common.css?v=2020.04.12">
    <link href="{$domain}/static/video_share/css/video_share.css?v=2020.04.12" rel="stylesheet"/>
    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.8/skins/default/aliplayer-min.css"/>
    <script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.8.8/aliplayer-min.js"></script>
</head>
<body>
<div class="prism-player" id="player-con"></div>
<div class="comments_con">


    <div class="list_con">
        <div class="header_con">
            <div class="video_title">{$data.article_info.title}</div>
            <div class="author_con">
                <div class="author_left_con">
                    <img class="img_author" onerror="onerror=null;src='{$oss}/avatar_default_2.png'"
                         src="{$oss}{$data.article_info.avatar}">
                    <div class="author_name">{$data.article_info.author}</div>
                </div>
                <div class="publish_time">{$data.article_info.time}</div>
            </div>
        </div>
        <div class="sep_con"></div>
        <div class="comment_header">
            <div class="left_con">
                <div>评论</div>
                <div class="count">{$data.article_info.comment_num}</div>
            </div>
            <div class="right_con">
                <div class="text">点赞 {$data.article_info.good_num}</div>
                <div class="text_collect">收藏 {$data.article_info.collect_num}</div>
            </div>
        </div>


        {if count($data.data) == 0}
        <div class="empty_con">
            <div class="empty_inner_con">
                <img class="img_empty" src="{$domain}/static/video_share/images/empty.png">
                <div class="title_empty">评论内容为空！</div>
            </div>
        </div>
        {/if}

        {if count($data.data) > 0}
        <div class="comment_list_con">
            {foreach $data['data'] as $k => $v}
            <div class="comment_con">
                <div class="sep_line"></div>
                <div class="top_con">
                    <div class="left_con">
                        <img class="img_user" onerror="onerror=null;src='{$oss}/avatar_default_2.png'" src="{$oss}/{$v.avatar}">
                        <div class="right_user">
                            <div class="user_name">{$v.nickname}</div>
                            <div class="time">{$v.time}</div>
                        </div>
                    </div>
                    <div class="right_con">
                        <div class="item_con">
                            <img class="img" src="{$domain}/static/video_share/images/img_zan_num.png">
                            <div class="num">{$v.good_num}</div>
                        </div>
                        <div class="item_con distance">
                            <img class="img" src="{$domain}/static/video_share/images/img_reply_num.png">
                            <div class="num">{$v.reply_num}</div>
                        </div>
                    </div>
                </div>
                <div class="content">{$v.content}</div>
                {if count($v['reply_list'])>0}
                <div class="reply_con">
                    {foreach $v['reply_list'] as $reply_k => $item}
                    <div class="item">
                        <div class="name">{$item.nickname1}</div>
                        <div class="reply">&nbsp;回复&nbsp;</div>
                        <div class="name">{$item.nickname2}&nbsp;</div>
                        <div class="reply">：</div>
                        <div class="comment_content">{$item.content}</div>
                    </div>
                    {/foreach}
                </div>
                {/if}
            </div>
            {/foreach}
        </div>
        {/if}
    </div>

</div>
<div class="bottom" id="bottom">
    <div class="shadow"></div>
    <div class="bo-left" id="close">x</div>
    <div class="bo-logo">
        <img src="{$share_img}" alt="">
    </div>
    <div class="bo-des">启动APP体验更多惊喜</div>
    <div class="bo-btn">
        <!--todo 点击打开app-->
        <a href="javascript:;" id="btn">打开APP</a>
    </div>
</div>


<script language="javascript">
    var share_title = '{$share_title}';
    var share_introduction = '{$share_introduction}';
    var share_img = '{$share_img}';
    var signPackage = JSON.parse('{:json_encode($signPackage)}');
    var article_info = JSON.parse('{:json_encode($data.article_info)}');
    var oss = '{$oss}';

    let link = encodeURIComponent('goddess_state_detail?id={$data.article_info.id}&type={$data.article_info.type}');

    new Mlink({
        mlink:'https://axelkv.mlinks.cc/A1bf?link=' + link,//短链地址
        button:document.querySelector('a#btn')
    });

    var close_btn = document.getElementById('close');
    close_btn.onclick = function () {
        document.getElementById('bottom').style.display = 'none';
    }

</script>

<script language="javascript">
    var player = new Aliplayer({
            "id": "player-con",
            "source": article_info.url,
            "width": "100%",
            "height": article_info.type == 3 ? "21.1rem" : "66.6rem",
            "autoplay": true,
            "isLive": false,
            // "cover": oss + article_info.thumb,
            "rePlay": true,
            "playsinline": true,
            "preload": true,
            "language": "zh-cn",
            "controlBarVisibility": "click",
            "videoWidth": "100%",
            "showBarTime": 5000,
            "useH5Prism": true,
            "skinLayout": [
                {
                    "name": "H5Loading",
                    "align": "cc"
                },
                {
                    "name": "errorDisplay",
                    "align": "tlabs",
                    "x": 0,
                    "y": 0
                },

                {
                    "name": "tooltip",
                    "align": "blabs",
                    "x": 0,
                    "y": 56
                },
                {
                    "name": "thumbnail"
                },
                {
                    "name": "controlBar",
                    "align": "blabs",
                    "x": 0,
                    "y": 0,
                    "children": [
                        {
                            "name": "progress",
                            "align": "blabs",
                            "x": 0,
                            "y": 44
                        },
                        {
                            "name": "playButton",
                            "align": "tl",
                            "x": 15,
                            "y": 12
                        },
                        {
                            "name": "timeDisplay",
                            "align": "tl",
                            "x": 10,
                            "y": 7
                        },
                        {
                            "name": "fullScreenButton",
                            "align": "tr",
                            "x": 10,
                            "y": 12
                        },
                        {
                            "name": "volume",
                            "align": "tr",
                            "x": 5,
                            "y": 10
                        }
                    ]
                }
            ]
        }, function (player) {
            console.log("The player is created");
        }
    );
</script>

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="https://static.mlinks.cc/scripts/dist/mlink.min.js"></script>
<script language="javascript">

    //微信分享 配置
    wx.config({
        debug: false,
        appId: signPackage.appId,
        timestamp: signPackage.timestamp,
        nonceStr: signPackage.nonceStr,
        signature: signPackage.signature,
        jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage']
    })
    ;
    //微信分享 配置
    wx.ready(function () {
        wx.onMenuShareAppMessage({
            title: share_title,
            desc: share_introduction,
            link: signPackage.url,
            imgUrl: share_img,
            type: 'link',
            dataUrl: '',
            success: function () {

            },
            cancel: function () {

            }
        });
        wx.onMenuShareTimeline({
            title: '{$share_title}',
            link: '{$signPackage.url}',
            imgUrl: '{$share_img}',
            success: function () {

            },
            cancel: function () {

            }
        });
    });
</script>
<script src="{$domain}/static/video_share/js/common_statistics.js"></script>
{include file="../apps/web/view/public/sensors.html" /}
</body>
</html>
